<template>
	<view class="cooperation">
		<uv-navbar title="攻略专区" @leftClick="leftClick"
			bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)" :fixed="true"></uv-navbar>
		<view class="cooperation-search">
			<view class="cooperation-top">
				<uv-search placeholder="请输入搜索内容" v-model="keyword" @search="search" @custom="search"></uv-search>
			</view>
		</view>

		<view class="tabs">
			<uv-tabs :list="list" @click="click" :scrollable="list.length > 4 ? true : false" :activeStyle="{ color: '#057748' }" :lineColor="'#057748'"></uv-tabs>
		</view>
		<view class="cart">
			<view class="cart-item" v-for="i in articleList" @click.stop="Godetail(i.id)" :key="i">
				<view class="cart-top">
					<view>{{ i.type_text }}</view>
				</view>
				<view class="cart-bottom">
					<view class="cart-left">
						<image :src="BaseUrl + i.cover" style="width: 170rpx;height: 170rpx;border-radius:30rpx ;"
							mode="scaleToFill" />
					</view>
					<view class="cart-right">
						<view class="cart-right-text line-clamp-2">
							{{ i.content }}
						</view>
						<view class="cart-right-bon">
							<view class="cart-right-left"
								style="display: flex; align-items: center;width: 200rpx;height: 60rpx;">
								<image :src="BaseUrl + '/static/catering/Eyeo.png'" style="width: 26rpx;height: 26rpx;"
									mode="scaleToFill" />
								<text class="cart-right-left-text">{{ i.views }}</text>
							</view>
							<view class="cart-right-right" @click.stop="dian(i.id)">
								<view v-if="0 == i.isLike" class="cart-right-ss">
									<image :src="BaseUrl + '/static/catering/noollection.png'"
										style="width: 30rpx;height: 30rpx;" mode="scaleToFill" />
									<view class="cart-right-s-texts">收藏</view>
								</view>
								<view v-else class="cart-right-s">
									<image :src="BaseUrl + '/static/catering/shouc.png'"
										style="width: 30rpx;height: 30rpx;" mode="scaleToFill" />
									<view class="cart-right-s-text">已收藏</view>
								</view>
							</view>

						</view>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
import { BaseUrl } from "../../../utils/req.js"
export default {
	data() {
		return {
			BaseUrl,
			keyword: '',

			list: [],

			// 攻略列表
			articleList: [],
			id: 0,
			text_id: 0
		}
	},
	onLoad(options) {
		this.ingv()
		this.id = options.id
	},
	methods: {
		// 跳转种草详情
		Godetail(id) {
			uni.navigateTo({
				url: '/dabai/pages/zcDetails/zcDetails?id=' + id
			})
		},
		// 收藏
		async dian(id) {
			  await this.$request
			        .post("api/wanlshop/find/user/setFindUser", {
			          id: id,
			          type: "likes",
			        })
			        .then((res) => {
			          if (res.data.data == 1) {
			            uni.showToast({
			              title: "收藏成功",
			              icon: "none",
			              duration: 2000,
			            });
			            this.getlist()
			          } else {
			            uni.showToast({
			              title: "取消收藏",
			              icon: "none",
			              duration: 2000,
			            });
			            this.getlist()
			          }
			        });
			// await this.$request.post("api/wanlshop/find/user/setFindUser", {
			// 	id: id,
			// 	type: 'likes'
			// }).then((res) => {
			// 	if (res.data.data == 1) {
			// 		uni.showToast({
			// 			title: "关注成功",
			// 			icon: "none",
			// 			duration: 2000,
			// 		});
			// 		this.getlist()
			// 	} else {
			// 		uni.showToast({
			// 			title: "取消关注",
			// 			icon: "none",
			// 			duration: 2000,
			// 		});
			// 		this.getlist()
			// 	}
			// })
		},
		leftClick() {
			uni.navigateBack()
		},

		click(e) {
			this.keyword = ''
			this.text_id = e.id
			this.getlist()

			console.log(e)
		},
		// 攻略列表
		async ingv() {
			await this.$request.get("api/wanlshop/find.find/cate", {

			}).then(res => {
				console.log(res.data, '分类');
				res.data.forEach(t => {
					if (this.id == t.pid) {
						this.list.push(t)
					}
				});
				this.list.unshift({
					id: 0,
					name: '全部'
				})
				this.text_id = this.list[0].id
				this.getlist()
			})
		},

		// 种草分类
		async getlist() {
			await this.$request.get("api/wanlshop/find.find/getList", {
				wanlshop_find_cate_id: this.text_id
			}).then(res => {

				console.log(res.data, '种草分类');
				this.articleList = res.data.data
			})
		},


		// 搜索
		async search() {
			await this.$request.get("api/wanlshop/find/find/getList", {
				search: this.keyword,
				type: 'works',
				page: 1,
				wanlshop_find_cate_id: this.text_id
			}).then((res) => {
				console.log(res.data.data, '搜索1111111111111111111111111');
				this.articleList = res.data.data
			})
		}

	}
}
</script>

<style lang="scss" scoped>
/deep/.uv-tabs__wrapper__nav__item {
	width: 50% !important;
}

/deep/.uv-search__content {
	background-color: #FFFFFF !important;
}

/deep/.uv-search__content__input {
	background-color: #FFFFFF !important;

}

/deep/.uv-search__action {
	background: linear-gradient(to right, #00a579, #057849);
	padding: 14rpx 30rpx;
	border-radius: 30rpx;
	margin-right: 4rpx;
	color: #fff !important;
	width: 140rpx !important;


}

// /deep/.uv-icon__icon {
// 	font-size: 0 !important;
// }



.cooperation {
	width: 100vw;
	height: 100vh;
	background: linear-gradient(to bottom, #D3F1DE 0%, #F4F6F5 30%, #F6F6F6 100%);

	.cooperation-search {
		width: 94vw;
		margin: 0rpx 3vw;
		padding-top: 190rpx;

		.cooperation-top {
			background-color: #fff;
			border-radius: 30rpx;

		}
	}



	.tabs {
		margin: 0 20rpx;
	}

	.cart {
		width: 94vw;
		padding-top: 20rpx;
		margin: 0 3vw;

		.cart-item {
			width: 100%;
			height: 290rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-bottom: 20rpx;

			.cart-top {
				width: 94vw;
				margin: 0 3vw;
				padding: 32rpx 34rpx 32rpx 0;
			}

			.cart-bottom {
				display: flex;


				.cart-left {
					margin: 0 20rpx;
				}

				.cart-right {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.cart-right-text {
						font-family: Source Han Sans CN;
						font-weight: 400;
						font-size: 26rpx;
						color: #666666;
						line-height: 1;
						padding-right: 20rpx;
					}

					.cart-right-bon {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-top: 20rpx;

						.cart-right-left {


							.cart-right-left-text {
								margin-left: 10rpx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								font-size: 26rpx;
								color: #666666;
							}
						}

						.cart-right-right {
							display: flex;
							align-items: center;

							.cart-right-s {
								display: flex;
								align-items: center;
								margin-right: 20rpx;
								border-radius: 30rpx;
								border: 1rpx solid #057849;
								padding: 6rpx 15rpx;

								.cart-right-s-text {
									margin-left: 10rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									font-size: 26rpx;
									color: #057748;

								}


							}

							.cart-right-ss {
								display: flex;
								align-items: center;
								margin-right: 20rpx;
								border-radius: 30rpx;
								border: 1rpx solid #666;
								padding: 6rpx 15rpx;

								.cart-right-s-texts {
									margin-left: 10rpx;
									font-family: Source Han Sans CN;
									font-weight: 400;
									font-size: 26rpx;
									color: #666666;
								}
							}
						}
					}
				}
			}

		}
	}
}
.line-clamp-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>
